<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            width: 500px;
            height: 2000px;
        }
    </style>
</head>
<body>
    <p id="scrollWH">网页内容宽高</p>
    <p id="winWH">窗口宽高</p>
    <p id="viewWH">可见区宽高</p>
    <script>
         scrollWH.innerHTML = 
         '网页内容宽:'+ (document.documentElement.scrollWidth || document.body.scrollWidth) +
          '网页内容高:'+ (document.documentElement.scrollHeight || document.body.scrollHeight) ;
         winWH.innerHTML = 
         '窗口宽:' + (document.documentElement.clientWidth || document.body.clientWidth) + 
         '窗口高:' + (document.documentElement.clientHeight || document.body.clientHeight) ;

         viewWH.innerHTML = 
         '可见区宽：' +  window.innerWidth+
         '可见区高：' +  window.innerHeight ;

       
    </script>
</body>
</html>